<template>
	<view class="bigBox">
		<u-navbar :autoBack="true" leftIconColor='#fff' bgColor='transparent'>
		</u-navbar>
		<u-avatar :src="src" shape="circle" style='border: 1px solid #fff;' :size='"120rpx"'></u-avatar>
		<view>
			<u-upload :fileList="fileList1" @afterRead="afterRead" name="1" multiple :maxCount="1">
				<view class="editBtn">更换头像</view>
			</u-upload>
		</view>
		<view class='input'>
			<u--input placeholder="请输入用户名" border="surround" v-model="value" @change="change"></u--input>
		</view>
		<view class="sexBox">
			<text>选择您的性别（不可修改）</text>
			<view :class="[sex=='男'?'sex show':'sex']" @click="sexChange('男')">男</view>
			<view :class="[sex=='女'?'sex show':'sex']" @click="sexChange('女')">女</view>
		</view>
		<view class="age"><text>选择你的年龄（通过滑动下方滚动条来设置）</text> <text class="ageNumber">{{age}}岁</text></view>
		<u-slider style='width: 750rpx;' v-model="age" min="0" max="120"></u-slider>
		<view class="addess">
			<text>选择你的住址：</text>
			<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
				{{addrss}}
			</pick-regions>
		</view>
		<view class="btn">确 认 修 改</view>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/7.jpg',
				value: '',
				age: 18,
				sex: '',
				show: false,
				addrss: '点击此处选择地址',
				region: [],
				defaultRegion: ['湖北省', '恩施土家族苗族自治州', '利川市'],
				defaultRegionCode: '422802',
				fileList1: []
			}
		},
		created() {
			this.regionName()
		},
		methods: {
			afterRead(event){
				this.src = event.file[0].url
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://api.zwhero.com/api/User/PostFormData', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			sexChange(value) {
				this.sex = value
			},
			change(value) {

			},
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			},
			handleGetRegion(region) {
				this.region = region
				this.addrss = `${region[0].name}-${region[1].name}-${region[2].name}`
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
				} = e
				console.log(index, columnIndex)
			},
			confirm(e) {
				console.log('confirm', e)
				this.show = false
			}
		}
	}
</script>

<style>
	.bigBox {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		padding-top: 160rpx;
		align-items: center;
		background-color: #252b47;
		padding-bottom: 40rpx;
		height: calc(100vh - 200rpx);
	}

	.editBtn {
		margin-top: 10rpx;
		width: 120rpx;
		height: 40rpx;
		line-height: 40rpx;
		background-color: #595c64;
		font-size: 20rpx;

		text-align: center;
		color: white;
	}

	.input {
		margin-top: 20rpx;
		width: 670rpx;
		height: 100rpx;
	}

	.uni-input-input {
		color: white;
	}

	.addess {
		margin-top: 20rpx;
		width: 670rpx;
		color: rgba(190, 199, 209, 100);
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.btn {
		position: absolute;
		bottom: 120rpx;
		width: 670rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-color: rgba(33, 51, 255, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 28rpx;
		text-align: center;
		font-family: Arial;
	}
</style>
<style lang="less">
	.age {
		margin-top: 20rpx;
		width: 670rpx;
		color: rgba(190, 199, 209, 100);
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// flex-direction: column;
		.ageNumber{
			font-size: 34rpx;
			font-weight: 700;
			margin-left: 40rpx;
			color: #fff;
		}
	}
	.sexBox {
		width: 670rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		text {
			color: rgba(190, 199, 209, 100);
			font-size: 28rpx;
		}

		.sex {
			width: 160rpx;
			height: 70rpx;
			margin-left: 10rpx;
			background-color: #F8F8F8;
			text-align: center;
			line-height: 70rpx;
			color: rgba(190, 199, 209, 100);
		}

		.show {
			background-color: #0C1332;
		}
	}
</style>
